<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>AceHub</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="shortcut icon" href="../header-footer/images/ico.jpg" type="image/x-icon">
    <link rel="stylesheet" href="../Homepage/css/header.css">
    <link rel="stylesheet" href="../header-footer/common.css">
    <!-- <link rel="stylesheet" href="../student/student-profile.css"> -->
    <link rel="stylesheet" href="../teacher/teacher-profile.css">
    <link rel="stylesheet" href="courseManager.css">
</head>
<style>/*Release course overall container adjustment*/
.tabs-content{
display: flex;
}
#courseManager .courseM {
display: flex;
width: 1000px;
/* margin: 20px auto; Add this line*/
padding: 24px 30px;
background: #f9faff;
border-radius: 10px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #222;
}
/*Course information and spacing between block groups*/
#courseManager h2 {
font-weight: 700;
font-size: 24px;
margin-bottom: 16px;
border-bottom: 2px solid #efbc14;
padding-bottom: 6px;
color: #357abd;
}
/*Uniform spacing for form groups*/
#coursePublishForm .form-group {
margin-bottom: 22px;
display: flex;
flex-direction: column;
}
/*Label Style*/
#coursePublishForm label {
font-weight: 600;
margin-bottom: 6px;
color: #4a4a4a;
}
/*Input box style*/
#coursePublishForm input[type="text"],
#coursePublishForm input[type="datetime-local"],
#coursePublishForm select,
#coursePublishForm textarea,
#coursePublishForm input[type="file"] {
padding: 10px 14px;
font-size: 15px;
border: 1.8px solid #ccc;
border-radius: 6px;
outline-color: #357abd;
transition: border-color 0.3s ease;
resize: none;
}
#coursePublishForm input[type="text"]:focus,
#coursePublishForm input[type="datetime-local"]:focus,
#coursePublishForm select:focus,
#coursePublishForm textarea:focus {
border-color: #efbc14;
}
/*Minimum height of textarea*/
#coursePublishForm textarea {
min-height: 100px;
font-family: inherit;
line-height: 1.5;
}
/*Checkbox area*/
.form-group-checkbox {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
}
.form-group-checkbox label {
margin-bottom: 0;
font-weight: 600;
}
/*Picture carousel area*/
.carousel-container {
min-height: 120px;
border: 2px dashed #efbc14;
border-radius: 8px;
padding: 10px;
margin-bottom: 12px;
background-color: #fffbea;
display: flex;
gap: 8px;
overflow-x: auto;
align-items: center;
}
/*List of courseware*/
#courseware ul {
list-style: none;
padding-left: 0;
margin-top: 8px;
}
#courseware ul li {
margin-bottom: 6px;
color: #555;
font-size: 14px;
}
/*Button container*/
.submit-button {
display: flex;
justify-content: center;
gap: 16px;
margin-top: 24px;
}
/*Uniform button width*/
button.btn-confirm {
min-width: 140px;
font-size: 16px;
padding: 12px 0;
border-radius: 8px;
font-weight: 700;
}
/*The distance between the upload file button and the file input*/
input[type="file"] {
margin-bottom: 10px;
cursor: pointer;
}
/*Responsive: Change from narrow screen to vertical arrangement*/
@media (max-width: 600px) {
#courseManager .courseM {
padding: 16px 20px;
}
.submit-button {
flex-direction: column;
}
button.btn-confirm {
width: 100%;
}
}
.search-box .searchbutton{
/* background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);  */
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(14, 165, 233, 0.4);
}
.search-box .searchbutton:hover{
/* background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);  */
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(14, 165, 233, 0.4);
}
/*Table*/
#student .account {
overflow-x: auto;
max-height: 400px; /*You can adjust the maximum height of the table as needed*/
border-radius: 8px;
background-color: transparent; /*Transparent background of container*/
border: 1px solid #ccc; /*Give the container a border to enhance its sense of hierarchy*/
position: relative;
}
/*Transparent background, remove shadows*/
#student table {
width: 100%;
border-collapse: collapse;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 14px;
color: #333;
background-color: transparent; /*Transparent background*/
}
/*Each cell has a border*/
#student thead th,
#student tbody td {
border: 1px solid #ccc;
padding: 12px 16px;
vertical-align: middle;
white-space: nowrap; /*Cancel line break*/
overflow: hidden; /*Beyond hidden*/
text-overflow: ellipsis; /*Ellipsis display*/
}
/*Change tbody rows to blocks to facilitate tbody scrolling*/
#student tbody {
display: block;
max-height: 360px; /*Make tbody scrollable*/
overflow-y: auto;
overflow-x: auto; /*Horizontal scrolling is also allowed*/
}
/*TBody TR line block display, width 100%*/
#student tbody tr {
display: table;
width: 100%;
table-layout: fixed;
border-bottom: none; /*The thin borders are all borne by TD*/
transition: background-color 0.3s ease;
}
/*Header background color*/
#student thead tr {
display: table;
width: 100%;
table-layout: fixed;
position: sticky;
top: 0;
z-index: 10;
background-color: #fff; /*Prevent transparency*/
}
/*Width of each column*/
#student tbody td:nth-child(1),
#student thead th:nth-child(1) {
width: 12%;
text-align: center;
}
#student tbody td:nth-child(2),
#student thead th:nth-child(2) {
width: 25%;
}
#student tbody td:nth-child(3),
#student thead th:nth-child(3) {
width: 15%;
text-align: center;
}
#student tbody td:nth-child(4),
#student thead th:nth-child(4) {
width: 12%;
text-align: center;
}
#student tbody td:nth-child(5),
#student thead th:nth-child(5) {
width: 30%;
text-align: center;
}
/*Maintain the style of operation buttons*/
#student tbody a.btn-confirm,
#student tbody a.btn-danger {
display: inline-block;
padding: 6px 12px;
margin: 0 4px;
font-size: 13px;
border-radius: 4px;
cursor: pointer;
text-decoration: none;
user-select: none;
transition: background-color 0.3s ease;
}
#student tbody a.btn-confirm {
background-color: #357abd;
color: white;
border: none;
}
#student tbody a.btn-confirm:hover {
background-color: #285a8f;
}
#student tbody a.btn-danger {
background-color: #e55353;
color: white;
border: none;
}
#student tbody a.btn-danger:hover {
background-color: #b93b3b;
}


</style>
<body>
    <!-- 页眉 -->
    <header class="navbar">
        <div class="nav">
            <div class="logo">
                <a href="../Homepage/WebsiteHomepage.html"><img src="../header-footer/images/logo.jpg" alt="AceHub"></a>
            </div>
            <nav>
                <ul>
                    <!-- TODO 补充链接 -->
                    <li><a href="../Homepage/WebsiteHomepage.html">home page</a></li>
                    <li><a href="../Homepage/courseList.html">course</a></li>
                    <li><a href="../Homepage/league.html">Alliance colleges</a></li>
                    <li><a href="../Homepage/about.html">About Us</a></li>
                </ul>
            </nav>
        </div>
        <div class="search-box">
            <input type="text" id="searchInput" placeholder="Search for ">
            <button type="button" id="searchButton" class="searchbutton"><i class="fas fa-search"></i></button>
        </div>
        <div class="info">
            <!-- TODO 补充链接 -->
        </div>
    </header>
    <!-- 主体 -->
    <div class="student-profile-header">
        <div class="student-profile-head">
            <img id="avatar" src="" alt="用户头像">
            <div class="student-profile-info">
                <h2 id="user-name">user name</h2>
                
            </div>
        </div>
    </div>

    <div class="student-profile-body" >
        <div class="sidebar">
            <a class="sidebar-item" href="#courses">My courses</a>
            <a class="sidebar-item" href="#courseManager">Publish courses</a>
            <a class="sidebar-item" href="#student">Managing students</a>
        </div>
        <div class="content">

            <!-- 我的课程 -->
            <div id="courses">
                <div class="tabs">
                    <a class="tabs-item" href="#courses/teach">Responsible for courses</a>
                </div>

                <div class="tabs-content">
                </div>

            </div>

            <!-- 发布课程 -->
            <div id="courseManager">
                <div class="tabs">
                    <a class="tabs-item" href="#courseManager/courseM">New courses</a>
                </div>

                <div class="tabs-content">
                    <div class="courseM">
                        <div class="file-part">
                            <form id="coursePublishForm">

                                <h2>course information</h2>
                                <div class="form-group">
                                    <label for="courseTitle">Course Title:</label>
                                    <input type="text" id="courseTitle" name="courseTitle" required>
                                    <label for="courseDescription">Course Description:</label>
                                    <textarea id="courseDescription" name="courseDescription" required></textarea>
                                    <label for="courseCategory">Course Category:</label>
                                    <select id="courseCategory" name="courseCategory" required>
                                        <option value="Science and Engineering">Science and Engineering</option>
                                        <option value="computer">computer</option>
                                        <option value="Education and Language">Education and Language</option>
                                        <!-- 其他课程类别 -->
                                        <option value="Literature and Art">Literature and Art</option>
                                        <!-- <option value="Entrepreneurship and Workplace">Entrepreneurship and Workplace</option>
                                        <option value="Philosophy, History, and Culture">Philosophy, History, and Culture</option>
                                        <option value="Economy and Management">Economy and Management</option>
                                        <option value="medicine">medicine</option> -->
                                    </select>
                                    <label for="courseIntro">Course Introduction:</label>
                                    <textarea id="courseIntro" name="courseIntro" required></textarea>
                                    
                                    <label>Candidate images:</label>
                                    <div id="carouselContainer" class="carousel-container"></div>
                                    <input type="file" id="carouselImageInput" accept="image/*" multiple>
                                    <button type="button" onclick="addCarouselImages()" class="btn-confirm">Add Picture</button>
                                    <div class="form-group-checkbox">
                                        <label for="enableComments">Open the course comment section:</label>
                                        <input type="checkbox" id="enableComments" name="enableComments">
                                    </div>
                                    <div class="form-group-checkbox">
                                        <label for="enableNotes">Open the course notes area:</label>
                                        <input type="checkbox" id="enableNotes" name="enableNotes">
                                    </div>
                                </div>

                                <h2>Add courseware</h2>
                                <div class="form-group">
                                    <label for="coursewareFile">Upload courseware:</label>
                                    <input type="file" id="coursewareFile" multiple>
                                    <button type="button" onclick="saveCourseware()" class="btn-confirm">Save courseware</button>
                                    <div id="courseware">
                                        <ul id="savedCoursewares"></ul>
                                    </div>
                                </div>

                                <h2>Add homework</h2>
                                <div class="form-group">
                                    <label for="assignmentTitle">Assignment Name:</label>
                                    <input type="text" id="assignmentTitle" name="assignmentTitle">
                                    <label for="newAssignment">Homework requirements:</label>
                                    <textarea id="newAssignment" name="newAssignment"></textarea>
                                    <label for="assignmentDeadline">closing date:</label>
                                    <input type="datetime-local" id="assignmentDeadline" name="assignmentDeadline">
                                    <button type="button" onclick="addAssignment()" class="btn-confirm">Assign homework</button>
                                    <div id="assignmentsContainer"></div>
                                </div>

                                <div class="submit-button">
                                    <button type="button" onclick="previewCourse()" class="btn-confirm">Preview Course</button>
                                    <button type="button" onclick="publishCourse()" class="btn-confirm">Publish courses</button>
                                </div>
                            </form>
                            <br>
                            <div id="forget">
                                <h2>Published courses</h2>
                                <ul id="publishedCourses"></ul>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <!-- 我的学生 -->
            <div id="student">
                <div class="tabs">
                    <a class="tabs-item" href="#student/account">Student account</a>
                </div>
                <div class="tabs-content">
                    <div class="account">
                        <table>
                            <thead>
                                <tr>
                                    <th>Student ID</th>
                                    <th>full name</th>
                                    <th>gender</th>
                                    <th>operate</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- 学生数据 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-logo">
                <a href="#home"><img src="../header-footer/images/logo.jpg" alt="AceHub"></a>
            </div>
            <div class="footer-text">
                <nav class="footer-nav">
                    <ul>
                        <li><a href="../Homepage/about.html">About Us</a></li>
                        <li><a href="../Homepage/contact.html">Contact Us</a></li>
                        <li><a href="../Homepage/privacy.html">Privacy Policy</a></li>
                        <li><a href="../Homepage/terms.html">Term of service</a></li>
                    </ul>
                </nav>
                <div class="footer-info">
                    <p>&copy; 2025 AceHub reserves all rights</p>
                </div>
            </div>
        </div>
    </footer>
    <script src="../database.js"></script>
    <script src="../account/account.js"></script>
    <script src="../teacher/teacher-profile-body.js"></script>
    <!-- <script src="../teacher/teacher-profile-database.js"></script> -->
    <script src="courseManager.js"></script>
    <!--页眉js-->
    <script>
        Console.log ("Get the latest js")
//Retrieve user information based on token
window.onload = function () {
const userid = localStorage.getItem('token');
//If a user logs in, display their profile picture in the info div; if not, display the login and registration button
if (userid) {
const user = JSON.parse(localStorage.getItem(userid));
let profileUrl = '';
let profileName = '';
let accountUrl = '';
if (userid === 'admin') {
profileUrl = '../account/admin-profile.html';
ProfileName='Personal Center';
accountUrl = '../account/admin-profile.html';
} else if (userid === 'teacher') {
profileUrl = '../account/teacher-profile.html';
ProfileName='Personal Center';
accountUrl = '../account/teacher-setting.html';
} else {
profileUrl = '../student/student-profile.html';
ProfileName='My Learning';
accountUrl = '../account/student-setting.html';
}
document.querySelector('.info').innerHTML = `
                    <div id="user-menu-trigger" style="cursor: pointer;">
                        <img id="user-head" src="${user.avatar}" alt="用户头像">
                    </div>
                    <div class="card" id="user-dropdown">
                        <ul>
                            <li><a href="${profileUrl}">${profileName}</a></li>
                            <li><a href="${accountUrl}">Account Settings </a></li>
                            <li><a id="logout" href="#logout">Log Out</a></li>
                        </ul>
                    </div>
                `;
                //如果点击退出登录，清除token
                document.getElementById('logout').addEventListener('click', () => {
localStorage.removeItem('token');
window.location.href = '../Homepage/WebsiteHomepage.html';
});
//Add the function of clicking on the avatar to display a dropdown menu
const userMenuTrigger = document.getElementById('user-menu-trigger');
const userDropdown = document.getElementById('user-dropdown');
if (userMenuTrigger && userDropdown) {
userMenuTrigger.addEventListener('click', function(e) {
e.preventDefault();
userDropdown.style.display = userDropdown.style.display === 'block' ?  'none' : 'block';
userDropdown.style.opacity = userDropdown.style.display === 'block' ?  '1' : '0';
userDropdown.style.transform = userDropdown.style.display === 'block' ?  'translateX(-50%) translateY(0)' : 'translateX(-50%) translateY(-10px)';
userDropdown.style.pointerEvents = userDropdown.style.display === 'block' ?  'auto' : 'none';
});
//Click elsewhere to close the dropdown menu
document.addEventListener('click', function(e) {
if (!userMenuTrigger.contains(e.target) && ! userDropdown.contains(e.target)) {
userDropdown.style.display = 'none';
userDropdown.style.opacity = '0';
userDropdown.style.transform = 'translateX(-50%) translateY(-10px)';
userDropdown.style.pointerEvents = 'none';
}
});
}
}
else {
document.querySelector('.info').innerHTML = `
                    <a href="../account/login.html"><button class="login">log on</button></a>
                    <a href="../account/register.html"><button class="register">register</button></a>
                `;
            }
        }
    </script>
    <!--设置访问权限,只有老师可以登录该页面-->
    <script>
        if (!localStorage.getItem('token')) {
Please log in first! ');
window.location.href = '../account/login.html';
}
else if (localStorage.getItem('token') ! == 'teacher') {
You do not have access to this page! ');
window.location.href = '../account/login.html';
}
    </script>
    <script>
        let userid = localStorage.getItem('token');
let user = JSON.parse(localStorage.getItem(userid));
document.getElementById('avatar').src = user.avatar;
document.getElementById('user-name').innerText = user.username;
//If the search for courses is empty, it will display 'Search courses not set yet'
if (user.signature === '') {
Document. getElementById ('signature '). inlerText=' Search course not set yet ';
}
else {
Document. getElementById ('signature '). inlerText=' Search course: '+user.signature;
}
    </script>
    <script>
        //Rendering, using map and join methods to render tables
const tbody = document.querySelector('tbody');
function render() {
let teacher = JSON.parse(localStorage.getItem('teacher'));
// if (teacher.allowRegister) {
////Turn on the switch
//     document.querySelector('.switch input').checked = true;
// }
let students = getStudents();
const trStu = students.map(function (student, index) {
return `
                    <tr>
                        <td>${student.userid}</td>
                        <td>${student.username}</td>
                        <td>${student.gender}</td>

                        <td>
                            <a id="reset-password" class="reset-password btn-confirm" href="#" data-id="${index}">reset password</a>
                            <a id="disable" class="disable btn-confirm" href="#" data-id="${index}">
                                ${student.status==false? 'Enable': 'Disable'}</a>
                            <a id="delete" class="delete btn-danger" href="#" data-id="${index}">delete</a>
                        </td>
                    </tr>
                `;
});
tbody.innerHTML = trStu.join('');
};
render();
//Manage student self registration function
// document.querySelector('.switch input').addEventListener('change', function (e) {
//     e.preventDefault();
//     const teacher = JSON.parse(localStorage.getItem('teacher'));
//     teacher.allowRegister = ! teacher.allowRegister;
//     localStorage.setItem('teacher', JSON.stringify(teacher));
//     render();
// });
//Operation when clicking the reset password, disable/enable, and delete buttons
tbody.addEventListener('click', function (e) {
if (e.target.id === 'reset-password') {
resetPassword(e);
}
else if (e.target.id === 'disable') {
changeStatus(e);
}
else if (e.target.id === 'delete') {
deleteAccount(e);
}
});
//Retrieve all values from localStorage
function getStudents() {
var students = [];
for (var i = 0; i < localStorage.length; i++) {
                const key = localStorage.key(i);
                //如果key是学生的学号，就把学生信息加入students数组
                if (key.startsWith('2')) {
                    students.push(JSON.parse(localStorage.getItem(key)));
                }
            }
            return students;
        }
        //重置密码
        function resetPassword(e) {
            let students = getStudents();
            const index = e.target.dataset.id;
            const student = students[index];
            const userid = student.userid;
            student.password = simpleHash(userid, userid);//重置密码为学号
            localStorage.setItem(student.userid, JSON.stringify(student));
            render();
            alert('密码重置成功！');
        }
        //禁用/启用账号
        function changeStatus(e) {
            let students = getStudents();
            const index = e.target.dataset.id;
            const student = students[index];
            student.status = !student.status;
            localStorage.setItem(student.userid, JSON.stringify(student));
            render();
            alert(`账号已${student.status ? '启用' : '禁用'}！`);
        }
        //删除账号
        function deleteAccount(e) {
            let students = getStudents();
            const index = e.target.dataset.id;
            const student = students[index];
            if (confirm('确定删除此账号？')) {
                localStorage.removeItem(student.userid);
                render();
                alert('账号已删除！');
            }
        }
    </script>
</body>

</html>
